<template>
  <div id="container"></div>
</template>

<script>
import hangzhou from '@/assets/bdmap/hangzhou';
import huzhou from '@/assets/bdmap/huzhou';
import jiaxing from '@/assets/bdmap/jiaxing';
import jinhua from '@/assets/bdmap/jinhua';
import lishui from '@/assets/bdmap/lishui';
import ningbo from '@/assets/bdmap/ningbo';
import quzhou from '@/assets/bdmap/quzhou';
import shaoxing from '@/assets/bdmap/shaoxing';
import taizhou from '@/assets/bdmap/taizhou';
import wenzhou from '@/assets/bdmap/wenzhou';
import zhoushan from '@/assets/bdmap/zhoushan';
import mapJson from '@/assets/bdmap/custom_map_config.json';

const BMapGL = window.BMapGL
const BMapGLLib = window.BMapGLLib
export default {
  data () {
    return {
      map: null,
      cityData:[
        hangzhou,
        huzhou,
        jiaxing,
        jinhua,
        lishui,
        ningbo,
        quzhou,
        shaoxing,
        taizhou,
        wenzhou,
        zhoushan
      ]
    }
  },
  methods: {
    initMap () {
      this.map = new BMapGL.Map('container')
      const map = this.map
      let centerPoint = new BMapGL.Point(120.210792,30.246026)
      map.centerAndZoom(centerPoint, 8)
      map.enableScrollWheelZoom(true);
      map.setMapStyleV2({styleJson:mapJson})
    },

    addMapOverlay () {
      const map = this.map
      // 绘制省市边界
      let cityArr = ['浙江省','杭州市', '温州市', '宁波市', '丽水市', '绍兴市', '衢州市', '金华市', '舟山市', '湖州市', '嘉兴市', '台州市']
      let ZJboundary = new BMapGL.Boundary()      
      for (let i = 0; i < cityArr.length; i++) {
        ZJboundary.get(cityArr[i], (res) => {
          let hole = new BMapGL.Polygon(res.boundaries, {
            fillColor: '#0068c9',
            fillOpacity: 0.4,
            strokeColor: '#67abeb',
            strokeWeight: 2
          });
          this.map.addOverlay(hole)
        })
      }

      this.cityData.forEach(city => {
        // 创建一个文本标注实例。第一个参数为内容，position指定文本标注所在的地理位置
        const point = new BMapGL.Point(...city.center)
        const label = new BMapGL.Label(city.name, {
          position: point
        })
        label.setStyle({
          color: '#fff',
          fontSize: '14px',
          border: '1px solid #fff',
          borderRadius: '4px',
          backgroundColor: '#000',
          padding: '2px 6px'
        })
        map.addOverlay(label)
      })
    },
    addMapTrack () {
      const map = this.map
      let flyUrl = '';
      function startLushu() {
        let lushu = new BMapGLLib.LuShu(map, polyline.getPath(), {
        geodesic: true,
        autoCenter: true,
        icon: new BMapGL.Icon(flyUrl, new BMapGL.Size(48, 48), { anchor: new BMapGL.Size(24, 24) }),
          speed: 500000,
          enableRotation: true
        });
        setTimeout(() => lushu.start(), 4000)
      }
      let path = [
        new BMapGL.Point(120.210792,30.246026),
        new BMapGL.Point(120.699279,27.993849)
      ]
      let polyline = new BMapGL.Polyline(path, {
        clip: true,
        geodesic: true,
        strokeWeight: 3,
        strokeOpacity: 0.5,
        strokeStyle: 'dashed',
        strokeColor: '#fff'
      });
      map.addOverlay(polyline);
      startLushu();
    }
  },

  mounted () {
    this.initMap()
    this.addMapOverlay()
    this.addMapTrack()
  }
}
</script>

<style scoped>
  #container {
    width: 100%;
    height: 100%;
  }
</style>